@import (reference) "../defs.less";
@import (reference) "../ui/menus.less";
@import (reference) "djblets/css/mixins/markdown.less";


/*
 * Any changes to this need to be reflected in _resizeLayout in
 * reviewRequestEditorView.js
 */

@details-width: 300px;


/****************************************************************************
 * Review request box
 ****************************************************************************/

.review-request {
  background: none;
  border-radius: @box-border-radius;
  box-shadow: @box-shadow;

  textarea {
    border: @textarea-border;
    height: 1.5rem;
    overflow: hidden;
  }

  .inline-editor-form input[type='text']:not(:focus) {
    box-shadow: 0px 0px 4px rgba(255, 0, 0, .75);
  }

  .required-flag {
    color: @required-flag-color;
    font-size: 10px;
    font-weight: bold;
    padding: 0 2px;
  }

  .editicon, .editicon:hover {
    text-decoration: none;
  }
}

.review-request-header {
  border-bottom: 1px @review-request-action-border-color solid;

  .on-mobile-medium-screen-720({
    text-align: center;
  });
}

.review-request-body {
  background-color: @review-request-bg;
  #gradient > .vertical(@review-request-bg-gradient-start,
                        @review-request-bg-gradient-end);
  border: 1px @review-request-border-color solid;
  border-top: 0;
  border-radius: 0 0 @box-border-radius @box-border-radius;
  clear: both;
  padding: 0.5rem;

  .field-container {
    position: relative;
  }
}

.banner pre.field,
.rb-c-unified-banner pre.field,
.review-request-body pre.field {
  background-color: @textarea-editor-background;
  border: @textarea-border;
  margin: @textarea-editor-margin;
  padding: @textarea-editor-padding;
  white-space: pre-wrap;

  .codehilite {
    .flush-codehilite();

    @codehilite-margin-horiz: (@code-block-border-size +
                                @code-block-padding-horiz -
                                @textarea-border-size);
    @codehilite-margin-vert: @code-block-padding-vert;
    margin: -@codehilite-margin-vert -@codehilite-margin-horiz;
    padding: @codehilite-margin-vert @codehilite-margin-horiz;
  }
}

.commit-list {
  background-color: @review-request-commit-list-bg;
  border: @review-request-field-border;
  border-collapse: collapse;
  margin: @textarea-editor-margin;
  display: table !important;
  width: 100%;

  &.changed {
    .marker {
      font-family: @textarea-font-family;
      font-size: @textarea-font-size;
      font-weight: bold;
      text-align: center;
      width: 0;
    }

    .new-value .marker {
      background: @diff-insert-linenum-color;
    }

    .old-value .marker {
      background: @diff-delete-linenum-color;
    }
  }

  .collapse-commit-message,
  .expand-commit-message {
    color: @review-request-commit-list-link-color !important;
  }

  .select-base,
  .select-tip {
    width: 0;
  }

  pre {
    margin: 0;
    white-space: pre-wrap;
  }

  td,
  th {
    border-bottom: @review-request-field-table-divider-border;
    font-family: @font-family !important;
    padding: 0.25em 0.5em;
    vertical-align: baseline;
  }

  th {
    text-align: left;
  }

  tr:last-child td {
    border-bottom: none;
  }

  .expand-collapse-control {
    width: 2em;
  }

  .value {
    width: 100%;
  }
}

.review-request-section {
  padding: @box-padding;
  position: relative;
}

.review-request-section-label {
  color: @review-request-label-color;
  font-size: @review-request-section-label-font-size;
  font-weight: bold;

  .editicon {
    /*
     * Make sure this has an explicit alignment and bounding box, in order to
     * avoid sub-pixel-precision issues during repository layout caused by
     * the default of `vertical-align: baseline` and content changes within
     * the label.
     */
    vertical-align: top;
  }
}

.review-request-summary {
  p {
    margin: @box-padding 0 0 0;
  }

  #field_summary {
    display: inline;

    a {
      color: black;
      text-decoration: none;
    }
  }

  .review-request-section-label, #field_summary {
    font-size: @review-request-summary-font-size;
  }

  .review-request-section-label {
    /* Hide the "Summary:" label on mobile. */
    .desktop-only();
  }

  .rb-icon-edit {
    vertical-align: text-bottom;
  }
}

.review-request-main-fieldset {
  display: block;
  margin-right: (@details-width + 10px);
  position: relative;

  .on-mobile-medium-screen-720({
    margin-right: 0;
  });
}

#review-request-main {
  .review-request-main-fieldset();
}

#review-request-extra {
  clear: both;
}

#review-request-warning {
  background-color: @review-request-warning-bg;
  border: 1px solid @review-request-warning-border-color;
  display: none;
  font-weight: bold;
  padding: 5px;
  text-align: center;
}

#field_commit_list {
  .review-request-main-fieldset();
}

/****************************************************************************
 * Review request details pane
 ****************************************************************************/

#review-request-details {
  border-spacing: 0px;
  float: right;
  width: @details-width;

  .on-mobile-medium-screen-720({
    /* Give the details pane its own full row above the other sections. */
    float: none;
    width: auto;
  });

  a {
    color: @link-color;
    text-decoration: none;
  }

  tbody {
    td, th, .field {
      vertical-align: text-top;
    }

    td, th {
      padding: 0 0 (@box-padding * 1.5) @box-padding;
    }

    th {
      text-align: right;
      white-space: nowrap;
    }

    .editicon {
      /* Undo style added in common.less */
      margin-left: 0;
    }

    .field {
      display: inline-block;
      margin-right: 4px;
      word-wrap: break-word;

      &:empty {
        margin-right: 0;
      }
    }
  }

  thead {
    &.first-fieldset th {
      padding-top: 0;
    }

    th {
      color: @review-request-label-color;
      font-size: @review-request-section-label-font-size;
      padding: (@box-padding * 2) 0 @box-padding 0;
      text-align: left;
    }
  }

  th {
    color: #39350B;
    font-weight: bold;
  }

  .buttons {
    display: block;
    margin-bottom: @box-padding;
    padding: 6px 0 0 0;

    input {
      font-size: 11px;
    }
  }
}


/****************************************************************************
 * Review request actions
 ****************************************************************************/

/**
 * Review request actions.
 *
 * Actions are grouped into two sections, which are left- and right-aligned.
 * The left-aligned group includes the star and archive actions, and is always
 * visible. The right-aligned group contains all of the editing actions, and
 * will be hidden behind a disclosure when on mobile devices.
 *
 * Structure:
 *     <div class="rb-c-actions" role="presentation">
 *      <menu class="rb-c-actions__content -is-left" role="menu">...</menu>
 *      <menu class="rb-c-actions__content -is-right" role="menu">
 *       <li class="rb-c-actions__action rb-o-mobile-menu-label"
 *           role="presentation">
 *        <a href="#" aria-controls="mobile-actions-menu-content"
 *           aria-expanded="false" aria-haspopup="true">
 *         <span class="fa fa-bars fa-lg" aria-hidden="true"></span>
 *        </a>
 *       </li>
 *       <div id="mobile-actions-menu-content" class="rb-o-mobile-menu">
 *        ...
 *       </div>
 *      </menu>
 *     </div>
 */
#review-request .rb-c-actions {
  background: @review-request-action-bg;
  border-color: @review-request-action-border-color;
  border-radius: @box-inner-border-radius @box-inner-border-radius 0 0;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  box-sizing: border-box;
  min-height: (@review-request-action-line-height +
               2 * @review-request-action-padding-vert);
  overflow: hidden;

  .review-ui-box & {
    border-radius: @box-inner-border-radius;
  }

  .review-ui-box.has-review-ui-box-content & {
    border-radius: @box-inner-border-radius @box-inner-border-radius 0 0;
  }

  /**
   * A group of review request actions.
   *
   * Modifiers:
   *     -is-left:
   *         The menu should be floated to the left.
   *
   *     -is-right:
   *         The menu should be floated to the right.
   */
  &__content {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;

    &.-is-left {
      float: left;
    }

    &.-is-right {
      float: right;
    }
  }

  /**
   * A review request action.
   *
   * Modifiers:
   *     -is-icon:
   *         The action only uses an icon without any additional text.
   *
   * Structure:
   *     <li class="rb-c-actions__action" role="presentation">
   *      <a href="#" role="menuitem">...</a>
   *     </li>
   */
  &__action {
    display: inline-block;

    &:hover {
      background: @review-request-action-hover-bg;
    }

    &:active {
      background: @review-request-action-active-bg;
    }

    a {
      color: black;
      cursor: pointer;
      display: block;
      margin: 0;
      line-height: @review-request-action-line-height;
      text-decoration: none;
      padding: @review-request-action-padding-vert
               @review-request-action-padding-horiz-text;
    }

    &.-is-icon > a {
      line-height: 0;
      padding: @review-request-action-padding-vert
               @review-request-action-padding-horiz-icon;
    }

    &.rb-o-mobile-menu-label {
      display: none;
    }
  }

  .rb-c-menu {
    background: @review-request-action-bg;
    border: 1px @review-request-action-menu-border-color solid;
    border-radius: 0 0 @box-border-radius @box-border-radius;
    box-shadow: @box-shadow;
    margin: 0;
  }

  .rb-c-menu__item {
    background: @review-request-action-bg;
    border: 0;
    float: none;
    margin: 0;
    padding: 0;

    &:hover {
      background-color: @review-request-action-menu-item-hover-bg;
    }

    &:last-child {
      border-radius: 0 0 @box-border-radius @box-border-radius;
    }
  }
}

.on-mobile-medium-screen-720({
  #review-request .rb-c-actions {
    &__action {
      &.rb-o-mobile-menu-label {
        display: inline-block;
        float: none;
      }

      a, &.-is-icon a {
        /* Give some extra room for tapping. */
        padding: @review-request-action-mobile-padding;
      }
    }

    .rb-o-mobile-menu {
      .rb-c-menu();

      background: @review-request-action-bg;
      border-color: @review-request-action-border-color;
      box-sizing: border-box;
      left: 0;
      width: 100%;

      &.-is-visible {
        opacity: 1;
        visibility: visible;
      }

      .rb-c-actions__action {
        display: block;
        text-align: left;

        /* This is for submenus. Just display them inline. */
        .rb-c-menu {
          border: 0;
          border-radius: 0;
          box-shadow: none;
          opacity: 1;
          padding-left: 1em;
          position: inherit;
          visibility: visible;
        }
      }
    }
  }
});


/****************************************************************************
 * Review request tabs
 ****************************************************************************/

/**
 * Review request tabs.
 *
 * Structure:
 *     <menu class="rb-c-review-request-tabs" role="menu">
 *      ...
 *     </menu>
 */
.rb-c-review-request-tabs {
  background-color: @review-request-action-bg;
  border-color: @review-request-border-color;
  border-radius: @box-border-radius @box-border-radius 0 0;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  float: right;
  list-style: none;
  margin: 0 0 0 1.5rem;
  overflow: hidden;
  padding: 0;

  /* TODO: dedupe with .review-request-action */
  /**
   * A review request tab.
   *
   * Modifiers:
   *     -is-active:
   *         Designates the active tab element.
   *
   * Structure:
   *     <li class="rb-c-review-request-tabs__tab -is-active"
   *         role="presentation">
   *      <a href="..." role="menuitem" aria-current="page">...</a>
   *     </li>
   *     <li class="rb-c-review-request-tabs__tab" role="presentation">
   *      <a href="..." role="menuitem">...</a>
   *     </li>
   */
  &__tab {
    border-bottom: 1px @review-request-action-border-color solid;
    float: left;
    min-width: 4rem;
    text-align: center;

    &:active {
      background-color: @review-request-action-active-bg;
    }

    &:hover {
      background-color: @review-request-action-hover-bg;
    }

    &.-is-active {
      background: @review-request-bg-gradient-start;
      border-color: @review-request-border-color;
      border-bottom-color: transparent;
      border-style: solid;
      border-width: 0 1px 1px 1px;

      &:first-child {
        border-left: 0;
      }

      &:last-child {
        border-right: 0;
      }
    }

    .review-ui-box &.-is-active {
      /*
       * The active tab in review UIs has a slightly different color to match the
       * review UI header color.
       */
       background-color: @review-ui-header-bg;
    }

    a {
      color: black;
      cursor: pointer;
      display: block;
      margin: 0;
      line-height: @review-request-action-line-height;
      text-decoration: none;
      padding: @review-request-action-padding-vert
               @review-request-action-padding-horiz-text;

      .on-mobile-medium-screen-720({
        /* Give some extra room for tapping. */
        padding: @review-request-action-mobile-padding
                 @review-request-action-padding-horiz-text;
      });
    }
  }
}


/****************************************************************************
 * Banners
 ****************************************************************************/
#discard-banner,
#submitted-banner {
  background: #E0E0E0;
  border: 1px #808080 solid;
}

#draft-banner,
#discard-banner,
#submitted-banner {
  border-top: 0;
  border-left: 0;
  border-right: 0;
  box-shadow: @box-shadow;
  margin-top: -@page-container-padding;
  margin-left: -@page-container-padding;
  margin-right: -@page-container-padding;
  margin-bottom: @page-container-padding;
  padding: @page-container-padding;

  .on-mobile-medium-screen-720({
    .banner-actions {
      margin-bottom: 2em;
    }
  });

  p label {
    .inline-editor-label();
    padding-top: 1em
  }

  &>p {
    margin: 1em 0 0 0;
  }
}

#draft-banner .interdiff-link {
  margin-top: 1em;
}


/****************************************************************************
 * Updates Bubble
 ****************************************************************************/

#updates-bubble {
  background: @alert-color;
  border-top: 1px #888866 solid;
  border-left: 1px #888866 solid;
  bottom: 0;
  border-radius: 10px 0 0 0;
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.15);
  font-size: 110%;
  padding: 1em;
  position: fixed;
  right: 0;
  z-index: @z-index-page-overlay;

  a, a:visited {
    color: #0000CC;
    text-decoration: none;
  }

  #updates-bubble-buttons {
    margin-left: 2em;
  }
}
